<template>
  <ElButton
    class="mine-button"
    :type="typeStyle"
    @click="leftClick()"
    @contextmenu.prevent="rightClick()"
    >{{ labelContent }}</ElButton
  >
</template>
<script lang="ts" setup>
import { Hole } from '@/entity/mine.entity'

const props = defineProps({
  meta: {
    type: Hole,
    default: () => new Hole()
  }
})
const emit = defineEmits(['todo2opened', 'todo2marked',
 'marked2todo','opened2opened'])

const typeStyle = computed(() => {
  switch (props.meta.state) {
    case 'todo':
      return 'info'
    case 'marked':
      return 'warning'
    case 'opened':
      if (props.meta.value === 9) {
        return 'danger'
      }
      return ''
  }
})
const labelContent = computed(() => {
  switch (props.meta.state) {
    case 'todo':
      return props.meta.value
    // return null
    case 'marked':
      return null
    case 'opened':
      return props.meta.value
  }
})
const leftClick = () => {
  if (props.meta.state === 'todo') {
    emit('todo2opened', props.meta)
    return
  } else if (props.meta.state === 'marked') {
    return
  } 
}
const rightClick = () => {
  console.log('rightClick')
  if (props.meta.state === 'todo') {
    emit('todo2marked', props.meta)
    return
  } else if (props.meta.state === 'marked') {
    emit('marked2todo', props.meta)
    return
  }else if (props.meta.state === 'opened') {
    emit('opened2opened', props.meta)
  }
}
defineExpose({ leftClick, rightClick })
</script>
<style lang="scss" scoped></style>
